import {Form, Input, Modal, Select, Space, Table} from "antd";
import {EmptyIfNull, ModeProp, OrderConfig} from "./BaseCompomentDef.tsx";
import {PREDICATE_CONFIG_KEY_OPTION, PREDICATE_CONFIG_KEYS} from "../model/RouteDef.ts";
import {useState} from "react";
import {LabelPredicateButton, PredicateButton} from "./ShowButton.tsx";


const PREDICATE_CONFIG_SELECT_OPTION = PREDICATE_CONFIG_KEYS.map( it => {
    return { label : it , value : it }
} )


const getRouteFilterOption = ( filterKey : string ) => {
    for (const eachOption of PREDICATE_CONFIG_KEY_OPTION) {
        if ( eachOption.key === filterKey ) {
            return eachOption;
        }
    }
    return { key : filterKey , description: "" }
}



export interface RouteFilterProp extends ModeProp {

    filter? : string

    onChangeFilter? : ( filter : string ) => void

}


export const RouteFilter = ( prop : RouteFilterProp ) => {
    const filter = prop.filter || '='
    const mode = prop.mode || 'display'
    const onChangeFilter = EmptyIfNull(prop.onChangeFilter)
    const filterKey = filter.substring( 0 , filter.indexOf('=') )
    const filterVal = filter.substring( filter.indexOf('=') + 1 , filter.length )
    const routeFilterOption = getRouteFilterOption(filterKey);

    const onChangeFilterKey = ( str : string ) => {
        onChangeFilter( str + "=" + filterVal )
    }

    const onChangeFilterVal = ( str : string ) => {
        onChangeFilter( filterKey + "=" + str )
    }


    return <>
        <p> { routeFilterOption.description } </p>
        <Form>
            <Form.Item label="key">
                <Select
                    disabled={ mode === 'display' }
                    options={ PREDICATE_CONFIG_SELECT_OPTION }
                    value={filterKey}
                    onChange={ onChangeFilterKey }
                ></Select>
            </Form.Item>
            <Form.Item label="value">
                <Input.TextArea
                    readOnly={mode === 'display'}
                    onChange={ (e) => onChangeFilterVal(e.target.value as string) }
                    value={filterVal}
                />
            </Form.Item>
        </Form>
    </>

}




interface FilterOpt extends ModeProp {

    filter : string

    index : number

}

const EMPTY_PREDICATE_OPT : FilterOpt = {

    mode : 'none' ,

    filter : 'RewritePath=' ,

    index : -1

} as const;



interface RouteFiltersProp extends ModeProp {

    filters? : string[]

    onAppendFilter? : ( filter : string ) => void

    onModifyFilter? : ( filter : string , index : number ) => void

    onRemoveFilter? : ( filter : string , index : number ) => void

}

export const RouteFilterTable = (prop : RouteFiltersProp )=> {
    const mode = prop.mode || 'display'
    const editable = mode === 'create' || mode === 'modify'
    const onAppendFilter = prop.onAppendFilter || (() => {} )
    const onModifyFilter = prop.onModifyFilter || (()=>{})
    const onRemoveFilter = EmptyIfNull( prop.onRemoveFilter )
    const filters : OrderConfig[] =  ( prop.filters || [] ).map( ( it , index ) => {
        return { key : index , order : index , config : it }
    })


    const [ filterOpt , _setFilterOpt ] = useState(EMPTY_PREDICATE_OPT)


    const _onCancelCreateOrModifyFilter = () => {
        _setFilterOpt( EMPTY_PREDICATE_OPT )
    }

    const _onCreateFilter = () => {
        _setFilterOpt( {  ...EMPTY_PREDICATE_OPT , mode : 'create' } )
    }

    const _onModifyFilter = ( ep : OrderConfig , index : number ) => {
        _setFilterOpt( { mode : 'modify' , index : index , filter : ep.config } )
    }

    const _onRemoveFilter = ( ep : OrderConfig , index : number ) => {
        onRemoveFilter( ep.config , index )
    }

    const _onDisplayFilter = ( ep : OrderConfig ) => {
        _setFilterOpt( { mode : 'display' , index : -1 , filter : ep.config } )
    }

    const _onChangeFilter = ( filter : string ) => {
        _setFilterOpt( { ...filterOpt , filter : filter } )
    }

    const _onCommitFilter = () => {
        const filterStr = filterOpt.filter
        if ( filterOpt.mode === 'modify' ) {
            onModifyFilter( filterStr , filterOpt.index )
        } else if ( filterOpt.mode === 'create' ) {
            onAppendFilter( filterStr )
        }
        _setFilterOpt(EMPTY_PREDICATE_OPT)
    }

    return <>
        <Modal
            closable={false}
            onOk={ _onCommitFilter }
            open={ filterOpt.mode === 'modify' || filterOpt.mode === 'create' }
            onCancel={ _onCancelCreateOrModifyFilter }
        >
            <RouteFilter
                mode={ filterOpt.mode }
                filter={ filterOpt.filter }
                onChangeFilter={ _onChangeFilter }
            />
        </Modal>
        <Table
            dataSource={filters}
            title={ () =>
                <LabelPredicateButton show={ editable } label="filters" onClick={_onCreateFilter} >append</LabelPredicateButton>
            }
        >
            <Table.Column title="order" render={ ( _ , ep : OrderConfig )=> {
                return <> { ep.order } </>
            } } />
            <Table.Column title="config" render={ ( _ , ep : OrderConfig )=> {
                return <> { ep.config } </>
            } }  />
            <Table.Column
                width={256}
                title="action"
                render={ ( _ , ep : OrderConfig , index  )=> { return <>
                    <Space>
                        <PredicateButton show={!editable} onClick={ ()=>{ _onDisplayFilter(ep) } } > display </PredicateButton>
                        <PredicateButton show={editable} onClick={ ()=>{ _onModifyFilter( ep , index ) } } > modify </PredicateButton>
                        <PredicateButton show={editable} onClick={()=>{ _onRemoveFilter(ep,index) }}> delete </PredicateButton>
                    </Space>
                </>}}
            />
        </Table>

    </>


}